<template>
  <div class="pop-dialog-container">
    <div class="pop-dialog-main">
      <el-form label-position="right" :model="salaryForm" :label-width="formLabelWidth" ref="refSalaryForm" :rules="rules">
        <el-row>
          <el-col :span="11">
            <el-form-item label="员工姓名" prop="employeeName">
              <el-input v-model="salaryForm.employeeName" placeholder="请选择员工姓名" readonly="readonly">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="findEmployee"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="基本工资" prop="basicSalary">
              <el-input-number v-model="salaryForm.basicSalary" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="绩效工资" prop="performanceSalary">
              <el-input-number v-model="salaryForm.performanceSalary" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="奖金" prop="bonus">
              <el-input-number v-model="salaryForm.bonus" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="津贴" prop="allowance">
              <el-input-number v-model="salaryForm.allowance" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="加班费" prop="overtimePay">
              <el-input-number v-model="salaryForm.overtimePay" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="社保扣除" prop="socialSecurityDeduction">
              <el-input-number v-model="salaryForm.socialSecurityDeduction" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="公积金扣除" prop="housingFundDeduction">
              <el-input-number v-model="salaryForm.housingFundDeduction" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="个人所得税扣除" prop="personalIncomeTaxDeduction">
              <el-input-number v-model="salaryForm.personalIncomeTaxDeduction" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="其他扣除" prop="otherDeductions">
              <el-input-number v-model="salaryForm.otherDeductions" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="应发工资" prop="grossSalary">
              <el-input-number v-model="salaryForm.grossSalary" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="实发工资" prop="netSalary">
              <el-input-number v-model="salaryForm.netSalary" :precision="2" :step="0.1" :min="1" :max="99999999"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="发放日期" prop="payDate">
              <el-date-picker
                  v-model="salaryForm.payDate" type="date" placeholder="发放日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="支付方式" prop="paymentMethod">
              <el-select v-model="salaryForm.paymentMethod" placeholder="请选择支付方式">
                <el-option label="银行转账" :value="10"></el-option>
                <el-option label="现金" :value="20"></el-option>
                <el-option label="支票" :value="30"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="银行账号" prop="bankAccountNumber">
              <el-input v-model="salaryForm.bankAccountNumber" placeholder="请输入银行账号" maxlength="64"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="pop-dialog-footer">
      <el-row>
        <el-col :span="11" :offset="6">
          <div class="form-button-container">
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onBack">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="employeeSelectorVisible" v-if="employeeSelectorVisible" title="员工基本信息选择器(双击行选中)" :top="dialogTop" :width="dialogWidth" :append-to-body="true">
      <employee-selector @employee-selected-event="handleEmployeeSelectedEvent">
      </employee-selector>
    </el-dialog>
  </div>
</template>

<script>
import salaryApi from '@/api/salaryApi'
import EmployeeSelector from "@/views/employee/EmployeeSelector.vue";
export default {
  name: 'SalaryAdd',
  components: {EmployeeSelector,},
  props: ['id'],
  mixins: [
  ],
  data () {
    return {
      salaryForm: {
        employeeId: '',
        employeeName: '',
        basicSalary: '',
        performanceSalary: '',
        bonus: '',
        allowance: '',
        overtimePay: '',
        socialSecurityDeduction: '',
        housingFundDeduction: '',
        personalIncomeTaxDeduction: '',
        otherDeductions: '',
        grossSalary: '',
        netSalary: '',
        payDate: '',
        paymentMethod: '',
        bankAccountNumber: ''
      },
      rules: {
        employeeName: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        basicSalary: [
          { required: true, message: '请输入基本工资', trigger: 'blur' }
        ],
        socialSecurityDeduction: [
          { required: true, message: '请输入社保扣除', trigger: 'blur' }
        ],
        housingFundDeduction: [
          { required: true, message: '请输入公积金扣除', trigger: 'blur' }
        ],
        personalIncomeTaxDeduction: [
          { required: true, message: '请输入个人所得税扣除', trigger: 'blur' }
        ],
        otherDeductions: [
          { required: true, message: '请输入其他扣除', trigger: 'blur' }
        ],
        grossSalary: [
          { required: true, message: '请输入应发工资', trigger: 'blur' }
        ],
        netSalary: [
          { required: true, message: '请输入实发工资', trigger: 'blur' }
        ],
        payDate: [
          { required: true, message: '请输入发放日期', trigger: 'blur' }
        ],
      },
      employeeSelectorVisible: false,
    }
  },
  created () {
    if (this.id) {
      salaryApi.findById(Number(this.id))
        .then(resp => {
          if (resp && resp.code === 1) {
            this.salaryForm = resp.data
          } else {
            this.$message.error('获取数据失败')
          }
        })
        .catch(error => {
          console.error('获取数据失败:', error)
        })
    }
  },
  methods: {
    onReset () {
      this.salaryForm = {
        employeeId: '',
        employeeName: '',
        basicSalary: '',
        performanceSalary: '',
        bonus: '',
        allowance: '',
        overtimePay: '',
        socialSecurityDeduction: '',
        housingFundDeduction: '',
        personalIncomeTaxDeduction: '',
        otherDeductions: '',
        grossSalary: '',
        netSalary: '',
        payDate: '',
        paymentMethod: '',
        bankAccountNumber: ''
      }
      this.$emit('reset-salary-add-event')
    },
    onSave () {
      this.$refs.refSalaryForm.validate((valid) => {
        if (valid) {
          salaryApi.save(this.salaryForm)
            .then((resp) => {
              if (resp && resp.code === 1) {
                this.$message.success('保存成功')
                this.$emit('close-salary-add-event', {search: true})
              } else {
                this.$message.error('保存失败:' + (resp.msg ? resp.msg : ''))
              }
            })
            .catch(error => {
              console.log(error)
              this.$message.error('保存失败')
            })
        } else {
          return false
        }
      })
    },
    findEmployee () {
      this.employeeSelectorVisible = true
    },
    handleEmployeeSelectedEvent (selectedEmployee) {
      this.employeeSelectorVisible = false
      if (selectedEmployee && 'employeeId' in selectedEmployee && this.salaryForm.employeeId !== selectedEmployee['employeeId']) {
        this.salaryForm.employeeId = selectedEmployee['employeeId']
        this.salaryForm.employeeName = selectedEmployee['employeeName']
      }
    },
    onBack () {
      this.$emit('close-salary-add-event')
    }
  }
}
</script>

<style lang="scss">
</style>